<template>
	<view>
		<u-navbar :is-back="false" title="记账">
			<view class="u-flex u-row-right" style="width: 100%; padding-right: 20rpx;">
				<view class="u-flex u-row-center" @click="click">
					<u-icon name="plus" color="#000000" size="48"></u-icon>
				</view>
			</view>
		</u-navbar>
		<view class="month_summary">
			<view class="summary_bg">
				<image src="/static/images/bg01.png" mode="aspectFill"></image>
			</view>

			<view class="summary_content">
				<view class="summary_content__header">
					<u-image src="@/static/logo.png" width="96" height="96" shape="circle"></u-image>
				</view>
				<view class="summary_payout__title">本月支出</view>
				<view class="summary_payout__value number_font">83779.48</view>
				<view class="summary_income_box">
					<view class="income_box__number">
						<text>本月收入</text>
						<text class="number_font">500.35</text>
					</view>
					<view class="income_box__number">
						<text>结余</text>
						<text class="number_font">20.35</text>
					</view>
				</view>
			</view>

		</view>
		
		<u-collapse :item-style="itemStyle" :arrow="false">
			<u-collapse-item :open="true" :arrow="false" :disabled="true">
				<view class="b-list-header" slot="title">
					<view class="b-list-header__title">
						<text>03/19</text>
					</view>
					<view>
						<text class="u-p-r-20">+25.4</text>
						<text>-555.4</text>
					</view>
				</view>

				<u-cell-item title="招商银行信用卡" value="25.33" :arrow="false" :title-style="titleStyle"
					:value-style="valueStyle" :border-top="true" :border-bottom="false">
					<template v-slot:icon>
						<u-image width="80rpx" height="80rpx"
							src="https://s1.wacdn.com/wis/535/cc10c3ff14aab800_80x80.png">
						</u-image>
					</template>
					<view slot="label">
						未出账 | 2天后出账
					</view>
				</u-cell-item>
				<u-cell-item title="招商银行信用卡" value="25.33" :arrow="false" :title-style="titleStyle"
					:value-style="valueStyle" :border-top="true" :border-bottom="false">
					<template v-slot:icon>
						<u-image width="80rpx" height="80rpx"
							src="https://s1.wacdn.com/wis/535/cc10c3ff14aab800_80x80.png">
						</u-image>
					</template>
					<view slot="label">
						未出账 | 2天后出账
					</view>
				</u-cell-item>
				<u-cell-item title="招商银行信用卡" value="25.33" :arrow="false" :title-style="titleStyle"
					:value-style="valueStyle" :border-top="true" :border-bottom="false">
					<template v-slot:icon>
						<u-image width="80rpx" height="80rpx"
							src="https://s1.wacdn.com/wis/535/cc10c3ff14aab800_80x80.png">
						</u-image>
					</template>
					<view slot="label">
						未出账 | 2天后出账
					</view>
				</u-cell-item>
			</u-collapse-item>
		
		</u-collapse>
		
		<u-collapse :item-style="itemStyle" :arrow="false">
			<u-collapse-item :open="true" :arrow="false" :disabled="true">
				<view class="b-list-header" slot="title">
					<view class="b-list-header__title">
						<text>03/19</text>
					</view>
					<view>
						<text class="u-p-r-20">+25.4</text>
						<text>-555.4</text>
					</view>
				</view>
		
				<u-cell-item title="招商银行信用卡" value="25.33" :arrow="false" :title-style="titleStyle"
					:value-style="valueStyle" :border-top="true" :border-bottom="false">
					<template v-slot:icon>
						<u-image width="80rpx" height="80rpx"
							src="https://s1.wacdn.com/wis/535/cc10c3ff14aab800_80x80.png">
						</u-image>
					</template>
					<view slot="label">
						未出账 | 2天后出账
					</view>
				</u-cell-item>
				<u-cell-item title="招商银行信用卡" value="25.33" :arrow="false" :title-style="titleStyle"
					:value-style="valueStyle" :border-top="true" :border-bottom="false">
					<template v-slot:icon>
						<u-image width="80rpx" height="80rpx"
							src="https://s1.wacdn.com/wis/535/cc10c3ff14aab800_80x80.png">
						</u-image>
					</template>
					<view slot="label">
						未出账 | 2天后出账
					</view>
				</u-cell-item>
				<u-cell-item title="招商银行信用卡" value="25.33" :arrow="false" :title-style="titleStyle"
					:value-style="valueStyle" :border-top="true" :border-bottom="false">
					<template v-slot:icon>
						<u-image width="80rpx" height="80rpx"
							src="https://s1.wacdn.com/wis/535/cc10c3ff14aab800_80x80.png">
						</u-image>
					</template>
					<view slot="label">
						未出账 | 2天后出账
					</view>
				</u-cell-item>
			</u-collapse-item>
		
		</u-collapse>
		
		<u-collapse :item-style="itemStyle" :arrow="false">
			<u-collapse-item :open="true" :arrow="false" :disabled="true">
				<view class="b-list-header" slot="title">
					<view class="b-list-header__title">
						<text>03/19</text>
					</view>
					<view>
						<text class="u-p-r-20">+25.4</text>
						<text>-555.4</text>
					</view>
				</view>
		
				<u-cell-item title="午餐" value="-25.33" :arrow="false" :title-style="titleStyle"
					:value-style="valueStyle" :border-top="true" :border-bottom="false">
					<template v-slot:icon>
						<u-image width="80rpx" height="80rpx"
							src="https://s1.wacdn.com/wis/535/cc10c3ff14aab800_80x80.png">
						</u-image>
					</template>
					<view slot="label">
						03-02 13:06
					</view>
				</u-cell-item>
				<u-cell-item title="午餐" value="-25.33" :arrow="false" :title-style="titleStyle"
					:value-style="valueStyle" :border-top="true" :border-bottom="false">
					<template v-slot:icon>
						<u-image width="80rpx" height="80rpx"
							src="https://s1.wacdn.com/wis/535/cc10c3ff14aab800_80x80.png">
						</u-image>
					</template>
					<view slot="label">
						03-02 13:06
					</view>
				</u-cell-item>
				<u-cell-item title="午餐" value="-25.33" :arrow="false" :title-style="titleStyle"
					:value-style="valueStyle" :border-top="true" :border-bottom="false">
					<template v-slot:icon>
						<u-image width="80rpx" height="80rpx"
							src="https://s1.wacdn.com/wis/535/cc10c3ff14aab800_80x80.png">
						</u-image>
					</template>
					<view slot="label">
						03-02 13:06
					</view>
				</u-cell-item>
			</u-collapse-item>
		
		</u-collapse>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				
				isShow: true,
				titleStyle: {
					fontSize: 32 + 'rpx'
				},
				valueStyle: {
					fontSize: 32 + 'rpx',
					color: 'grey'
				},
				itemStyle: {
					display: 'flex',
					flexDirection: 'column',
					marginTop: '20rpx',
					backgroundColor: '#FFF',
				}
			}
		},
		onLoad() {

		},
		methods: {
			click() {
				uni.navigateTo({
					url: "bookkeeping"
				})
			},
		}
	}
</script>

<style lang="scss">
	.month_summary {
		display: flex;
		flex-direction: column;
		position: relative;
		padding: 40rpx;
		width: 100%;
		height: 360rpx;
		display: flex;
		color: $uni-bg-color-hover;

		.summary_bg {
			z-index: 0;
			position: absolute;
			right: 0;
			top: 0;
			bottom: 0;
			left: 0;

			image {
				width: 100%;
				height: 100%;
			}

		}

		.summary_content {
			z-index: 99;

			.summary_content__header {
				display: flex;
				flex-direction: column;
				align-items: center;

			}

			.summary_payout__value {
				font-size: 58rpx;
				margin: 10rpx 0;
			}

			.summary_income_box {
				display: flex;
				flex-direction: row;

				.income_box__number {
					width: 50%;

					text {
						margin-right: 20rpx;
					}
				}
			}
		}

	}

	.number_font {
		color: $uni-text-color-inverse;
	}
	
	.b-list-header {
		display: flex;
		flex-direction: row;
		width: 100%;
		padding: 0 20rpx;
		justify-content: space-between;
		font-size: 10px;
		color: $uni-text-color-grey;
	}
	
	
</style>
